<template>
  <div class="main">
    <div class="search">
      <div>
        <h2>友情链接</h2>
      </div>
      <div>
        <el-button type="primary" @click="fenleiguanli">分类管理</el-button>
        <el-button type="primary" @click="addfenlei">添加分类</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
      </div>
    </div>

    <TableList
      :loading="loading"
      :tabledata="tableData"
      :params="params"
      :tabledatacolumn="tableDataColumn"
      :isshow="true"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
    >
      <template v-slot:default="info">
        <el-button type="text" @click="chakan(info.info)">查看</el-button>
        <el-button type="text" @click="editcontent(info.info)" v-if="getToken() == 'admin'">编辑</el-button>
        <el-button type="text" @click="deleteRow(info.info)" v-if="getToken() == 'admin'">删除</el-button>
      </template>
    </TableList>

    <el-dialog title="分类管理" :visible.sync="dialogTableVisible" width="500px">
      <el-table :data="classdata" border>
        <el-table-column property="name" label="分类名称" />
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button type="text" @click="bianjilanmu(scope.row)">编辑</el-button>
            <el-button type="text" @click="shanchu(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="分类管理" :visible.sync="dialogFromVisible" width="880px">
      <Form ref="columnForm" :formdata="formdata" :formobj="form" :formrules="formrules" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="新增" :visible.sync="dialogaddFromVisible" width="800px">
      <Form ref="form" :formdata="yqljformData" :formobj="yqljformobj" :formrules="yqljformrules" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="quxiao2">取 消</el-button>
        <el-button type="primary" @click="addsubmit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="查看" :visible.sync="dialogck" width="900px">
      <div>
        <h4>{{details.title}}</h4>
        <div v-html="'链接：'+details.url" style="margin-top: 20px;"></div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { validateNum } from '@/utils/validator'
  import { columnAdd, columnEdit, columnqueryAll, columndelete, contentApiAdd, contentApiedit, queryCascadePage, contentApidelete } from '@/api/webpage'
  import Form from '@/components/form.vue'
  import TableList from '@/components/TableList.vue'
  export default {
    name: 'Yqljlist',
    components: {
      TableList,
      Form
    },
    data() {
      return {
        dialogck: false,
        details: {},
        loading: true,
        options: [],
        tableData: [],
        tableDataColumn: [
          { label: '标题', key: 'title' },
          { label: '链接', key: 'url' }
        ],
        params: {
          total: 0,
          pageNum: 1,
          pageSize: 10,
          approval: 1,
          columnId: '16D0E38381094EF29885ACA54294F88D'
        },
        dialogTableVisible: false,
        dialogFromVisible: false,
        dialogaddFromVisible: false,
        classdata: [],
        formrules: {
          code: [{ required: true, message: '请输入编码', trigger: 'blur' }],
          name: [{ required: true, message: '请输入标题', trigger: 'blur' }]
        },
        form: [
          { label: '编码', key: 'code', type: 'input' },
          { label: '名称', key: 'name', type: 'input' }
        ],
        formLabelWidth: '80px',
        formdata: {},
        type: 'add',

        yqljformData: {
          columnId: '',
          ctitle: '',
          title: '',
          no: '',
          content: '',
          url: ''
        },
        yqljformobj: [
          { label: '所属栏目', key: 'columnId', type: 'select', options: [] },
          // { label: "图片", key: "url", type: "pic" },
          { label: '标题', key: 'title', type: 'input' },
          { label: '链接', key: 'url', type: 'input' },
          { label: '排序', key: 'no', type: 'input' }
          // { label: "内容", key: "content", type: "editor" }
        ],
        yqljformrules: {
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ]
          // no: [
          //   { required: false, message: "请输入序号", trigger: "blur" },
          //   {
          //     validator: validateNum,
          //     message: "请输入正整数",
          //     trigger: "blur",
          //   },
          // ],
          // content: [
          //   { required: false, message: "请输入正文", trigger: "change" },
          // ],
        },
        addtype: 'add'
      }
    },
    created() {
      this.getlist()
      this.getclassdata()
    },
    methods: {
      chakan(row) {
        this.dialogck = true
        this.details = row
      },
      addsubmit() {
        this.$refs.form.getData().then(res => {
          if (this.addtype == 'edit') {
            contentApiedit(res).then((response) => {
              if (response.data == 1) {
                this.$message.success('成功')
                this.dialogaddFromVisible = false
                this.quxiao2()
                this.getlist()
              } else {
                this.$message.error('失败')
              }
            })
              .catch((err) => {
                console.log(err)
              })
          } else {
            contentApiAdd(res).then((response) => {
              if (response.data == 1) {
                this.$message.success('成功')
                this.dialogaddFromVisible = false
                this.getlist()
                this.quxiao2()
              } else {
                this.$message.error('失败')
              }
            })
              .catch((err) => {
                console.log(err)
              })
          }
        })
      },
      bianjilanmu(row) {
        // 编辑
        this.dialogFromVisible = true
        this.formdata = JSON.parse(JSON.stringify(row))
        this.type = 'edit'
      },
      submit() {
        this.$refs.columnForm.getData().then((res) => {
          if (this.type == 'edit') {
            res.id = this.formdata.id
            res.parentId = this.formdata.parentId
            columnEdit(res).then((res) => {
              if (res.code == 0) {
                console.log(res)
                this.$message.success(res.message)
                this.dialogFromVisible = false
                this.getclassdata()
              } else {
                this.$message.error(res.message)
              }
            })
          } else {
            res.parentId = '16D0E38381094EF29885ACA54294F88D'
            columnAdd(res).then((res) => {
              if (res.code == 0) {
                console.log(res)
                this.$message.success(res.message)
                this.dialogFromVisible = false
                this.getclassdata()
              } else {
                this.$message.error(res.message)
              }
            })
          }
        })
      },
      quxiao() {
        this.$refs.columnForm.resetForm()
        this.$refs.columnForm.clearValidate()
        this.dialogFromVisible = false
      },
      quxiao2() {
        this.$refs.form.resetForm()
        this.$refs.form.clearValidate()
        this.dialogaddFromVisible = false
      },
      fenleiguanli() {
        this.dialogTableVisible = true
      },
      addfenlei() {
        this.type = 'add'
        this.dialogFromVisible = true
        this.$refs.columnForm.resetForm()
      },
      getclassdata() {
        const data = {
          name: '',
          code: '',
          parentId: '16D0E38381094EF29885ACA54294F88D'
        }
        columnqueryAll(data).then((res) => {
          if (res.code == 0) {
            this.classdata = res.data
            this.yqljformobj[0].options = res.data.map(item => {
              return { label: item.name, value: item.id }
            })
          }
        })
      },
      add() {
        this.dialogaddFromVisible = true
        // this.$router.push({
        //   name: 'addform',
        //   query:{
        //     cid:this.params.columnId
        //   }
        // })
      },
      editcontent(row) {
        this.dialogaddFromVisible = true
        this.yqljformData = JSON.parse(JSON.stringify(row))
        this.addtype = 'edit'
        // this.$router.push({
        //   name: 'addform',
        //   query: { type: 'edit', id: row.id }
        // })
      },
      getlist() {
        queryCascadePage(this.params).then((res) => {
          if (res.code == 0) {
            this.loading = false
            this.tableData = res.rows.map(item => {
              item.isTop = item.topContent == 1 ? '是' : '否'
              item.isNice = item.niceContent == 1 ? '是' : '否'
              return item
            })
            this.params.total = res.total
          }
        })
      },
      handleCurrentChange(val) {
        this.params.pageNum = val
        this.getlist()
      },
      handleSizeChange(val) {
        this.params.pageSize = val
        this.getlist()
      },
      deleteRow(row) {
        console.log(row)
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            const ids = []
            ids.push(row.id)
            contentApidelete(ids)
              .then((res) => {
                if (res.data == 1) {
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  })
                  this.getlist()
                } else {
                  this.$message.error('删除失败')
                }
              })
              .catch((err) => {
                console.log(err)
              })
          })
          .catch(() => { })
      },
      shanchu(row) {
        console.log(row)
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            const ids = []
            ids.push(row.id)
            columndelete(ids)
              .then((res) => {
                if (res.data == 1) {
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  })
                  this.getclassdata()
                } else {
                  this.$message.error('删除失败')
                }
              })
              .catch((err) => {
                console.log(err)
              })
          })
          .catch(() => { })
      }
    }
  }
</script>
<style scoped>
  @import "~@/assets/css/adminstyle.css";
</style>
